<template>
  <div>
    <div class="deleteAndSearch">
      <el-button @click="handleDelete" v-show="props.deleteEdit" >批量删除</el-button>
      <el-switch
        v-show="props.switchShow"
        v-model="yesOrNo"
        size="small"
        active-text="仅直属分类"
        @change="switchChange"/>
      <el-input placeholder="搜索名称"   v-model="name"  @change="inputChange" :suffix-icon="Search"/>
    </div>

    <avue-crud
      ref="crudRef"
      :option="option"
      :data="searchData.records || []"
      v-model:page="page"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      @row-click="rowClick"
      @current-change="currentChange"
      @refresh-change="currentChange(1)"
    >
    </avue-crud>

    <el-dialog
      v-model="dialogVisible"
      title="删除"
      width="30%"
    >
      <span>确认是否删除?</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteItem">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup  >
import type {PropType} from "vue";
import { Search } from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
export interface ISearchType {
  total:Number,
  current:Number,
  size:Number,
  records:Array<any[]>
}
const props = defineProps({
  deleteEdit:{
    type:Boolean,
    default:() => true
  },
  searchParams:{
    type:Object,
    default:() => {}
  },
  searchData:{
    type:Object as PropType<ISearchType>,
    default:() => {}
  },
  column:{
    type:Array,
    default:() => []
  },
  switchShow:{
    type:Boolean,
    default:() => false
  }
})
const emit = defineEmits(['rowClick','pageLoad','delete','searchInput'])
const yesOrNo = ref(false)
const yesOrNoValue = ref(0)
let count = ref(1)
const crudRef = ref()
const name = ref('')
watch([()=> props.column, () => props.searchData, () => props.deleteEdit ], ([value1, value2, value3],oldValue,onCleanup) => {
  console.log(`${count.value++}`,value2)
  option.column = value1

  page.value.total = value2.total
  page.value.currentPage = value2.current
  page.value.pageSize = value2.size
  option.selection = value3
})
const page = ref({
  total:props.searchData.total,
  currentPage:props.searchData.current,
  pageSize:props.searchData.size,
  pagerCount:6,
  layout: "total,prev,pager,next",
})

 const option = reactive({
   maxHeight:600,
   selection:true,
   tip:false,
   reserveSelection:true,
   rowKey:'vid',
   menu:false,
   header:true,
   addBtn:false,
   defaultSort:{
     prop:'name'
   },
   refreshBtn:false,
   columnBtn:false,
   column:props.column
 })
let selectList = reactive<Array<any>>([])
const sortChange = (column, prop, order) => {
  const sortType = column.order == 'descending' ? 'desc' : 'asc'
  emit('pageLoad', {
    pageRes: {
      columnName:column.prop,
      sortType:sortType,
      current:1,
      size:page.value.pageSize,
      name:props.searchParams.name,
      code:props.searchParams.code,
      yesOrNo:yesOrNoValue.value
    }
  })
}
const dialogVisible = ref(false)
const handleDelete = () => {
  if (selectList.length <= 0) {
    ElMessage('数据不能为空')
  } else {
    dialogVisible.value = true
  }
}
const deleteItem = () => {
  dialogVisible.value = false
  emit('delete', {
    selectList:selectList
  })
}
const selectionChange = (list) => {
  selectList = list
}

const rowClick = (row, column, event) => {
  emit('rowClick', {
    rowRes:row
  })
}

const inputChange = (value) => {
  name.value = value
  emit('pageLoad', {
    pageRes: {
      columnName: props.searchParams.columnName,
      sortType:props.searchParams.sortType,
      name:value,
      current:page.value.currentPage,
      size:page.value.pageSize,
      code:props.searchParams.code,
      yesOrNo:yesOrNoValue.value
    }
  })

}
const currentChange = (currentPage) => {
  page.value.currentPage = currentPage
  emit('pageLoad', {
    pageRes: {
      columnName: props.searchParams.columnName,
      sortType:props.searchParams.sortType,
      name:props.searchParams.name,
      current:page.value.currentPage,
      size:page.value.pageSize,
      code:props.searchParams.code,
      yesOrNo:yesOrNoValue.value
    }
  })
}
const switchChange = (val) => {
  yesOrNo.value = val
  yesOrNoValue.value = val ? 1: 0
  emit('pageLoad', {
    pageRes: {
      columnName: props.searchParams.columnName,
      sortType:props.searchParams.sortType,
      name:name.value,
      current:page.value.currentPage,
      size:page.value.pageSize,
      code:props.searchParams.code,
      yesOrNo:yesOrNoValue.value
    },
  })
}
const onFilterNameClear = () => {
  name.value = ''
}
const clearSelection = () => {
  crudRef.value.toggleSelection();
}

defineExpose({
  onFilterNameClear,
  clearSelection
})
</script>

<style scoped lang="scss">
.deleteAndSearch {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  .el-input {
    width: 192px;
  }
}
</style>
